<template>
	<view class="page">
		<view class="fixed">
			<view class="fixed_top">
				<view class="address_view dis-flex flex-y-center" @tap.stop="pageTo('/pages/city_list/index',{},'redirect')">
					<image class="address_icon" :src="imgPrefix('/static/image/icon/address_icon.png')"></image>
					<view class="address_city onelist-hidden">{{ city }}</view>
					<image class="search_next" :src="imgPrefix('/static/image/icon/search_next.png')"></image>
				</view>
				<view class="search_input_view">
					<image class="search_icon" :src="imgPrefix('/static/image/icon/search_icon.png')"></image>
					<input class="search_input" type="text" placeholder="输入位置搜索" v-model="inputValue" @confirm="searchInput" />
				</view>
			</view>
			<view class="fixed_bottom">
				<view class="loaction_title onelist-hidden">
					当前定位：
					<text class="loaction_text">{{ formattedAddresses }}</text>
				</view>
				<view class="again_loaction_view" @tap.stop="_getLocation">
					<image class="loaction_icon" :src="imgPrefix('/static/image/icon/loaction_icon.png')"></image>
					<text class="again_loaction_text">重新定位</text>
				</view>
			</view>
		</view>
		<view class="address_list">
			<view class="address_top">
				<image class="address_icon" :src="imgPrefix('/static/image/icon/address_icon.png')"></image>
				<text class="near_text">附近定位</text>
			</view>
			<view class="address_main">
				<view @tap.stop="bindAddress(item,index)" class="address_item" v-for="(item,index) in addressList" :key="index">
					<view class="address_title" v-html="searchHighlight(item.title)"></view>
					<view class="address_region">{{item.address}}</view>
				</view>
				<load-more @tap.stop="bindLoading" :status="loadingStatus"></load-more>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
import API from '@/static/api/index.js';
import loadMore from '@/components/loadmore/index.vue';
import { getLocation } from '@/static/uitls/getLocation.js';
import { commonMixinFun } from '@/static/mixins/common.js';
export default {
	components:{
		loadMore
	},
	mixins: [commonMixinFun],
	data() {
		return {
			latitude:app.globalData.location.lat,
			longitude:app.globalData.location.lng,
			city: app.globalData.location.city.replace('市',''),
			formattedAddresses: app.globalData.location.address,
			inputValue: '',
			addressList:[],
			page_size:10,
			page_index:1,
			count:0,
			loadingStatus:'loading'
		};
	},
	onLoad(option) {
		this.page_index=1;
		this.isRequest=false;
		this.getAddressByAddress()
	},
	methods:{
		// 获取用户位置信息
		_getLocation() {
			this.showLoading('加载中');
			this.inputValue=''
			let _this = this;
			getLocation(
				function(res) {
					let { code, latitude, longitude } = res;
					if (code) { //用户拒绝提供经纬度信息 直接搜索北京
						_this.latitude = '';
						_this.longitude = '';
						_this.formattedAddresses = '北京';
					} else {
						app._log(latitude,longitude)
						_this.latitude = latitude;
						_this.longitude = longitude;
						API.reverseAddressResolution(latitude, longitude)
							.then(function(resp) {
								try {
									_this.formattedAddresses = resp.result.formatted_addresses.recommend;//格式化位置
								} catch (err) {
									_this.formattedAddresses = '北京';
								}
								_this.page_index=1;
								_this.isRequest=false;
								_this.getAddressByAddress()
							})
							.catch(err => {
								_this.formattedAddresses = '北京';
							});
					}
					// app._log(res);
				},false,true,_this);
		},
		// 根据字符串地址/经纬度获取附近信息
		getAddressByAddress(){
			let {loadingStatus,isRequest,count,addressList,city,inputValue,latitude, longitude,page_index,page_size}=this;
			if(!isRequest&&(count>page_size*page_index||page_index==1)){
				this.isRequest = true;
				this.loadingStatus = 'loading'
				let request = '';
				if(inputValue!=''||Number(app.globalData.location.lat)==0){ //有填搜索关键词或者没有定位
					request = API.nearAddressInformation(inputValue||city,city,page_index,page_size);
				}else{
					request = API.nearAddressInformation(city,latitude,longitude,page_index,page_size);
				}
				request.then(res=> {
					if(res.status==0){
						// app._log(res)
						let {data}=res;
						if(page_index==1){
							this.city = data[0].ad_info.city.replace('市','')
						}
						let arr = [];
						if(data.length>0){
							data.forEach(e=>{
								arr.push({title:e.title,address:e.address,location:e.location})
							})
							this.addressList = [...(page_index==1?[]:addressList),...arr];
						}
							this.count = res.count;
						// app._log(data)
						if(page_index==1){
							uni.pageScrollTo({scrollTop:0})
							if(page_index==1&&data.length==0){ //没有任何数据
								this.loadingStatus ='empty';
							}
						}
						if(data.length>0){
							this.loadingStatus = addressList.length>=res.count?'nomore':'getmore'; //有无更多数据
							this.page_index+=1
						}
					}else{
						app._log('报错了',res)
						this.addressList = []
						this.loadingStatus = 'error';
					}
				this.isRequest = false;
				}).catch(err => {
					app._log('报错了',err)
					this.addressList = [];
					this.loadingStatus = 'error';
				this.isRequest = false;
				});
			}
		},
		
		
		searchInput(){
			this.page_index=1;
			this.isRequest=false;
			this.getAddressByAddress()
		},
		// 关键词高亮  （追加）
		searchHighlight(keyword) {
			return app.searchHighlight(this.inputValue,keyword,'#7F4AFF');
		},
		// 页面置地事件
		onReachBottom(e){
			this.getAddressByAddress();
		},
		// 点击加载
		bindLoading(){
			if(this.loadingStatus=='error'||this.loadingStatus=='empty'){
				this.page_index=1;
				this.getAddressByAddress();
			}
		},
		// 点击地址
		bindAddress(item,index){
			// app._log(item)
			let {location,title}=item
			app.globalData.location.lat = location.lat;
			app.globalData.location.lng = location.lng;
			app.globalData.location.address = title;
			this.pageTo('/pages/index/index',{},0)
		}
	}
	
};
</script>

<style lang="scss">
.page {
	background-color: #fff;
}
.fixed {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 202rpx;
	background-color: #fff;
		border-bottom: 2rpx solid #f8f8f8;
	&_top,
	&_bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	&_top {
		padding: 16rpx 48rpx 24rpx 48rpx;
		.address_view {
			.address_icon,
			.search_next {
				width: 24rpx;
				height: 24rpx;
			}
			.address_city {
				width: 76rpx;
				padding: 0 4rpx 0 8rpx;
			}
		}
		.search_input_view {
			width: 518rpx;
			height: 72rpx;
			background-color: #f4f4f4;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			position: relative;
			.search_icon {
				width: 26rpx;
				height: 26rpx;
				position: absolute;
				left: 24rpx;
			}
			.search_input {
				width: 436rpx;
				position: absolute;
				left: 60rpx;
			}
		}
	}
	&_bottom {
		padding: 26rpx 48rpx;
		border-top: 2rpx solid #f8f8f8;
		.loaction_title {
			color: #8f8f9a;
			font-size: 28rpx;
			.loaction_text {
				color: #252748;
			}
		}
		.again_loaction_view {
			display: flex;
			align-items: center;
			white-space: nowrap;
			.loaction_icon {
				width: 26rpx;
				height: 26rpx;
			}
			.again_loaction_text {
				padding-left: 8rpx;
				font-size: 24rpx;
				color: #7f4aff;
			}
		}
	}
}
.address_{
	&list{
		padding-top: 202rpx;
	}
	&top{
		display: flex;
		align-items: center;
		padding: 24rpx 48rpx 0;
		border-top: 2rpx solid #f8f8f8;
	.address_icon{
			width: 24rpx;
			height: 24rpx;
		}
	.near_text{
		padding-left: 14rpx;
			font-size: 24rpx;
			color: #8f8f9a;
		}
	}
	&icon{
	
	}
	&main{
		padding:0 48rpx;
		.address_item{
		padding: 34rpx 0;
		border-bottom: 2rpx solid #f8f8f8;
		.address_title {
			font-size: 28rpx;
			line-height: 40rpx;
			color: #252748;
		}
		.address_region{
			padding-top: 12rpx;
			font-size: 22rpx;
			color: rgba(143, 143, 154, 0.6);
		}
		}
	}
	
}
</style>
